<template lang="pug">
  .disperse_box
    h4 添加房源
    el-form
      section(v-show="houseInfoShow")
        .disperse_section
          .radio_item
            span 房源类型：
            el-radio-group(v-model="houseType" @change="houseTypeChangeHandler")
              el-radio(label="1") 分散
              el-radio(label="2") 集中
          .radio_item
            span 出租形式：
            el-radio-group(v-model="rentType" @change="[rentTypeChangeHandler, rentShow=!rentShow]")
              el-radio(:disabled="rentShow" label="1") 合租
              el-radio(label="2") 整租
          .radio_item
            span 是否筹开：
            el-radio-group.raiseType(v-model="raiseType" @change="raiseTypeChangeHandler")
              el-radio.radio_one(label="1") 否
              el-radio(label="2") 是
              .date_box(v-show="dateShow")
                el-date-picker.picker_box(v-model="date" type="date" value-format="yyyy-MM-dd" placeholder="选择预计开业时间" size="mini" @change="changeDataHandler")
        .disperse_section
          .search_section
            .select_group
              el-select(v-model="city" filterable placeholder="请选择")
                el-option(v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value")
            .select_group
              span 小区：
              el-select(v-model="estate" filterable placeholder="请选择")
                el-option(v-for="item in estateData" :key="item.value" :label="item.label" :value="item.value")
            .select_group
              el-button(type="primary" icon="el-icon-plus" @click="dialogAddHouseShow=!dialogAddHouseShow") 添加新小区
            el-dialog(title="添加小区" :visible.sync="dialogAddHouseShow" center)
              el-form(:model="form")
                el-form-item(label="小区名称" :label-width="formLabelWidth")
                  el-row
                    el-col(:span="20")
                      el-input(v-model="form.name" auto-complete="off")
                el-form-item(label="所属城市" :label-width="formLabelWidth")
                  el-select(v-model="form.region" placeholder="请选择所在城市")
                    el-option(label="上海" value="shanghai")
                    el-option(label="北京" value="beijing")
              .dialog-footer(slot="footer")
                el-button(@click="dialogAddHouseShow=!dialogAddHouseShow") 取 消
                el-button(type="primary" :plain="true" @click="[submitHandleMap, dialogAddHouseShow=!dialogAddHouseShow]") 确 定
        .disperse_section
          el-table(ref="multipleSelection" :data="tableData" border style="width: 100%")
            // el-table-column(type="selection" header-align="center" align="center" width="40")
            el-table-column(label="栋（楼号）" width="100" align="center")
              template(slot-scope="scope")
                el-input(placeholder="" :value="scope.row.number")
            el-table-column(label="单元号" width="65" align="center")
              template(slot-scope="scope")
                el-input(placeholder="" :value="scope.row.unit")
            el-table-column(label="室号" width="85" align="center")
              template(slot-scope="scope")
                el-input(placeholder="" :value="scope.row.room")
            el-table-column(label="户型" align="center")
              template(slot-scope="scope")
                .select_item
                  el-select(v-model="select_room" placeholder="室")
                    el-option(v-for="item in numberData" :key="item.value" :label="item.label" :value="item.value")
                .select_item
                  el-select(v-model="select_hall" placeholder="厅")
                    el-option(v-for="item in numberData" :key="item.value" :label="item.label" :value="item.value")
                .select_item
                  el-select(v-model="select_defend" placeholder="卫")
                    el-option(v-for="item in numberData" :key="item.value" :label="item.label" :value="item.value")
            el-table-column(label="建筑面积" width="85" align="center")
              template(slot-scope="scope")
                el-input(placeholder="" :value="scope.row.area")
            el-table-column(label="总楼层数" width="85" align="center")
              template(slot-scope="scope")
                el-input(placeholder="" :value="scope.row.total")
            el-table-column(label="所在楼层" width="85" align="center")
              template(slot-scope="scope")
                el-input(placeholder="" :value="scope.row.address")
            el-table-column(label="朝向" width="85" align="center")
              template(slot-scope="scope")
                el-select(v-model="orientation" placeholder="请选择")
                  el-option(v-for="item in orientationData" :key="item.value" :label="item.label" :value="item.value")
            el-table-column(prop="house" label="房源分配" width="150" align="center")
            el-table-column(label="操作" width="160" align="center")
              template(slot-scope="scope")
                el-button(type="info" size="mini" plain) 分配
                el-button(type="danger" size="mini" plain) 删除
          .button_group.mt20.ar
            el-button(type="primary" icon="el-icon-plus") 添加一条
        .submit_box.ac
          el-button(@click="houseInfoShow=!houseInfoShow") 下一步
      section(v-show="!houseInfoShow")
        .address_info
          p {{ estate }} {{ tableData[0].number }} {{ tableData[0].unit }} {{ tableData[0].room }}
        .house_info
          h4 房源信息
            .select_group.margin20
              el-row(:gutter="10")
                el-col(:span="4")
                  el-input(placeholder="请输入房间名称")
                el-col(:span="4")
                  el-select(v-model="roomTypeArr" filterable placeholder="房源类型")
                    el-option(v-for="item in roomTypeData" :key="item.value" :label="item.label" :value="item.value")
                el-col(:span="2")
                  el-input(placeholder="面积")
                el-col(:span="4")
                  el-select(v-model="orientationA" filterable placeholder="朝向")
                    el-option(v-for="item in orientationData" :key="item.value" :label="item.label" :value="item.value")
                el-col(:span="4")
                  el-select(v-model="numberA" filterable placeholder="可住人数")
                    el-option(v-for="item in numberData" :key="item.value" :label="item.label" :value="item.value")
            .select_group.margin20
              el-row(:gutter="10")
                el-col(:span="4")
                  el-input(placeholder="公区" value="公区" disabled)
                el-col(:span="4")
                  el-select(v-model="roomTypeZero" filterable placeholder="公区" disabled)
                    el-option(v-for="item in roomTypeZeroData" :key="item.value" :label="item.label" :value="item.value")
                el-col(:span="2")
                  el-input(placeholder="面积")
                el-col(:span="4")
                  el-select(v-model="orientationB" filterable placeholder="朝向")
                    el-option(v-for="item in orientationData" :key="item.value" :label="item.label" :value="item.value")
                el-col(:span="4")
                  el-select(v-model="numberZero" filterable placeholder="可住人数" disabled)
                    el-option(v-for="item in numberZeroData" :key="item.value" :label="item.label" :value="item.value")
        .submit_box.ac.mt60
          el-button(type="primary" :plain="true" @click="submitHouseForm") 提交保存
          el-button(@click="houseInfoShow=!houseInfoShow") 继续添加房源
  //-
    transition(name="fade")
      router-view
</template>

<script>
  export default {
    data () {
      return {
        dialogAddHouseShow: false,
        dateShow: false,
        houseInfoShow: true,
        rentShow: true,
        houseType: '1',
        rentType: '1',
        raiseType: '1',
        date: '',
        cityData: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        city: '',
        estateData: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '双皮奶',
          label: '双皮奶'
        }, {
          value: '蚵仔煎',
          label: '蚵仔煎'
        }, {
          value: '龙须面',
          label: '龙须面'
        }, {
          value: '北京烤鸭',
          label: '北京烤鸭'
        }],
        estate: '',
        tableData: [{
          id: '23123',
          number: '12',
          unit: '3',
          room: '1209',
          type: '',
          area: '89',
          total: '26',
          address: '17',
          orientation: '',
          house: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: [],
        orientationData: [{
          value: '东',
          label: '东'
        }, {
          value: '西',
          label: '西'
        }, {
          value: '南',
          label: '南'
        }, {
          value: '北',
          label: '北'
        }],
        orientation: '',
        orientationA: '',
        orientationB: '',
        orientationC: '',
        orientationD: '',
        orientationArr: '',
        roomTypeData: [{
          value: '主卧',
          label: '主卧'
        }, {
          value: '次卧',
          label: '次卧'
        }, {
          value: '客卧',
          label: '客卧'
        }],
        roomTypeA: '',
        roomTypeB: '',
        roomTypeC: '',
        roomTypeD: '',
        roomTypeArr: [],
        roomTypeZeroData: [{
          value: '公区',
          label: '公区'
        }],
        roomTypeZero: '公区',
        numberData: [{
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }],
        select_room: '',
        select_hall: '',
        select_defend: '',
        numberA: '',
        numberB: '',
        numberC: '',
        numberD: '',
        numberZeroData: [{
          value: '0',
          label: '0'
        }],
        numberZero: '0',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
      }
    },
    components: {
    },
    computed: {

    },
    created () {

    },
    mounted () {
    },
    methods: {
      houseTypeChangeHandler (val) {
        console.log('改变之后的值是:' + val)
        val === '2' ? this.rentShow = false : this.rentShow = true
      },
      rentTypeChangeHandler (val) {
        console.log('改变之后的值是:' + val)
      },
      raiseTypeChangeHandler (val) {
        console.log('改变之后的值是:' + val)
        val === '2' ? this.dateShow = true : this.dateShow = false
      },
      changeDataHandler (val) {
        console.log('日期是:' + val)
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
        console.log(this.multipleSelection)
      },
      submitHouseForm () {
        this.$message({
          message: '恭喜你，提交成功！',
          type: 'success',
          onClose: () => {
            this.$router.push('house')
          }
        })
      },
      submitHandleMap () {
        this.$message({
          message: '恭喜你，提交成功！',
          type: 'success'
        })
      },
      handleAddHouse () { }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/scss/_variables.scss';

  .disperse_section {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid $--color-border;
    .radio_item {
      margin-bottom: 10px;
      .raiseType {
        .radio_one {
          margin-right: 14px;
        }
      }
    }
    .date_box {
      display: inline;
      span {
        display: inline;
      }
      .picker_box {
        position: absolute;
        margin-top: -7px;
        margin-left: 30px;
      }
    }
    .select_group {
      display: inline-block;
      margin-right: 20px;
      span {
        margin-right: 10px;
      }
    }
    .select_item {
      display: inline-block;
      width: 60px;
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }
</style>

